<template>
  <view class="wx-page" :style="styles">
    <view class="wx-title">
      <view class="wx-title-back-btn" v-if="!!showBackBtn">
        <image class="back-btn-img"
               @click="clickBack"
               src="@/static/common/btn-head-back.png">
        </image>
      </view>
      <view class="wx-title-body" v-if="!!title">
        <view class="title">{{title}}</view>
      </view>
      <view class="wx-title-slot" v-if="!!$slots.title">
        <slot name="title"></slot>
      </view>
    </view>
    <view class="wx-fixed">
      <slot name="fixed"></slot>
    </view>
    <view class="wx-body">
      <scroll-view class="scroll-container" scroll-y="true" :show-scrollbar="false"
                   @scrolltolower="scrollToPageBottom">
        <slot></slot>
        <view class="page-bottom">
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref} from 'vue';
const props = defineProps({
  full:{
    type:Boolean,
    default:false
  },
  styles:String,
  fixedHeight:{
    type:String,
    default:'0px'
  },
  title: String,
  showBackBtn: Boolean
});
const pageLayout = ref({
  menuButtonPositionTop:'0px',//胶囊菜单所在位置距离顶部的高度
  menuButtonHeight:'0px',//胶囊菜单的高度
  pageBodyPositionTop: '0px',//
  pageBodyHeight: '100vh'
})

const menuButtonInfo = uni.getMenuButtonBoundingClientRect?.();
if (!!menuButtonInfo) {
  pageLayout.value.menuButtonPositionTop = menuButtonInfo.top + 'px'
  pageLayout.value.menuButtonHeight = menuButtonInfo.height + 'px'
  if(!props.full){
    pageLayout.value.pageBodyPositionTop = menuButtonInfo.bottom + 'px'
  }
}else {
  pageLayout.value.menuButtonHeight = '30px'
  if(!props.full){
    pageLayout.value.pageBodyPositionTop = '30px'
  }
}
const windowInfo = uni.getSystemInfoSync()
if (!!windowInfo) {
  pageLayout.value.pageBodyHeight = windowInfo.windowHeight + 'px'
}

const clickBack = ()=>{
  uni.navigateBack()
}
console.info('pageLayout', pageLayout.value, menuButtonInfo, windowInfo)

const emit = defineEmits(['scrollToPageBottom'])

const scrollToPageBottom = ()=>{
  emit('scrollToPageBottom')
}
</script>

<style lang="scss" scoped>
.wx-body{
  ::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
  }
}

.wx-page{
  box-sizing: border-box;
  width: 750rpx;
  height: v-bind('pageLayout.pageBodyHeight');
  .wx-title{
    box-sizing: border-box;
    width: 100%;
    height: v-bind('pageLayout.menuButtonHeight');

    position: absolute;
    top: v-bind('pageLayout.menuButtonPositionTop');
    z-index: 99;
  }
  .wx-fixed{
    box-sizing: border-box;
    width: 100%;
    height: v-bind('fixedHeight');

    position: absolute;
    top: v-bind('pageLayout.pageBodyPositionTop');
  }
  .wx-body{
    box-sizing: border-box;
    width: 100%;
    height: calc(v-bind('pageLayout.pageBodyHeight') - v-bind('pageLayout.pageBodyPositionTop') - v-bind('fixedHeight'));

    position: absolute;
    top: calc(v-bind('pageLayout.pageBodyPositionTop') + v-bind('fixedHeight'));
  }
}

.wx-title{

  .wx-title-back-btn{
    position: fixed;
    z-index: 999;
    left: 32rpx;
    width: v-bind('pageLayout.menuButtonHeight');
    height: v-bind('pageLayout.menuButtonHeight');
    .back-btn-img{
      width: inherit;
      height: inherit;
    }
  }
  .wx-title-body{
    box-sizing: border-box;
    position: absolute;
    z-index: 997;
    width: 750rpx;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .title{
      scale: 0.8;
      font-size: v-bind('pageLayout.menuButtonHeight');
      line-height: v-bind('pageLayout.menuButtonHeight');
      font-weight: 700;
    }
  }
  .wx-title-slot{
    box-sizing: border-box;
    position: absolute;
    z-index: 998;
    width: 750rpx;
    height: v-bind('pageLayout.menuButtonHeight');
  }
}

.wx-body{
  .scroll-container{
    height: inherit;
  }
}
.page-bottom{
  width: 750rpx;
  height: 60rpx;
}
</style>